{% extends 'base.html' %}
{% block title %}
    交叉表属性分组
{% endblock %}

{% block style %}
    <style>
        .layui-form-label {
            width: 120px;
        }

        .layui-input-block {
            margin-left: 150px;
        }
    </style>
{% endblock %}

{% block body %}
    <div class="from_main">


        <form id="" class="layui-form" action="">
            <div id="formList">

            </div>

            <hr style="margin: 40px auto 40px;">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit" style="margin: 20px 0 0 70%;">
                立即提交
            </button>
        </form>
        <input id="attrGroup" type="hidden" value="{{ attr_group }}">
    </div>



    <script type="text/html" id="input">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>主属性</legend>
        </fieldset>
        <div class="layui-form-item">

            <label class="layui-form-label">{{ '{{ Object.keys(d.main_attr) }}' |safe }}</label>
            <div class="layui-input-block">
                <input type="text" name="{{ '{{ Object.keys(d.main_attr) }}'|safe }}" lay-verify="main_attr"
                       autocomplete="off"
                       placeholder="请输入主属性"
                       class="layui-input" value="{{ '{{ Object.values(d.main_attr) }}' }}">
                <input type="hidden" name="main_attr" value="{{ '{{ Object.keys(d.main_attr) }}'|safe }}">
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title">
            <legend>属性</legend>
        </fieldset>

        {{ '{{# layui.each(d.other_attr, function(key, item){ }}'|safe }}
        <div class="layui-form-item">
            <label class="layui-form-label">{{ '{{ key }}'|safe }}</label>
            <div class="layui-input-block">
                <input type="text" name="{{ '{{ key }}'|safe }}" lay-verify="title" autocomplete="off"
                       placeholder="请输入分组：以英文逗号进行分割，区间值格式为 xx-xx。 示例：30,40-70,80" class="layui-input"
                       value="{{ '{{ item }}'|safe }}">
            </div>
        </div>
        {{ '{{# }); }}'|safe }}

    </script>
{% endblock %}


{% block script %}
    <script>
        function handleParse(str) {
            return eval("(" + str + ")");
        }

        layui.use(['jquery', 'laytpl', 'form'], function () {
            let $ = layui.jquery,
                form = layui.form,
                laytpl = layui.laytpl;
            let attr = $('#attrGroup').val()
            attr = handleParse(attr)
            let getTpl = input.innerHTML,
                view = document.getElementById('formList');
            laytpl(getTpl).render(attr, function (html) {
                view.innerHTML = html;
            });


            //监听提交
            form.on('submit(submit)', function (data) {
                $.ajax({
                    type: 'POST',
                    url: '/cross/group/' + {{ pk|safe }},
                    contentType: "application/json",
                    dataType: 'json',
                    data: JSON.stringify(data.field),
                    success: function (res) {
                        console.log(res)
                        if (res.code === 200) {
                            layer.msg('修改成功', {icon: 1}, function () {
                                //关闭后的操作
                                window.location.href = '/cross/' +
                                {{ pk|safe }}
                            });
                        } else if (res.code === 400) {
                            layer.msg('修改失败', {icon: 2}, function () {
                                //关闭后的操作
                            })
                        }
                    }
                })
                return false;
            });


        })
    </script>
{% endblock %}